<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0000_画圆</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
  // 圆环的思路：在一个渐变的实心圆上，掏个洞
  const color =  [{ // 指定渐变色
        step: '0',
        color: '#43e8ff'
      }, {
              step: '0.4',
              color: '#8024db'
      }, {
              step: '0.6',
              color: '#a044ff'
      }, {
              step: '0.9',
              color: '#5205ce'
      }, {
              step: '1',
              color: '#25c1fb'
      }];
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath() // 绘制渐变外圆
  const gradient = ctx.createLinearGradient(300, 600, 300, 0); // 创建一个沿参数坐标指定的指向渐变
  color.forEach(element => {
    gradient.addColorStop(element.step, element.color);
  })
  ctx.fillStyle = gradient;
  ctx.arc(300, 300, 300, 0, (Math.PI / 180) * 360, false) // false 顺时针
  ctx.fill()
  ctx.closePath()
  ctx.beginPath() // 绘制纯色内院
  ctx.fillStyle = 'white'
  ctx.arc(300, 300, 200, 0, (Math.PI / 180) * 360, false)
  ctx.fill()
  ctx.closePath()
</script>
</html>